<template>
	<view class="page-wrap">
		<view class="set-up-option">
			<view class="option-row">
				<view class="option-row-key">
					头像
				</view>
				<view class="option-row-right">
					<view class="option-row-logo">
						<image class="img-full" src="@/static/user/logo.png"></image>
					</view>
				</view>
			</view>
			<view class="option-row">
				<view class="option-row-key">
					修改密码
				</view>
				<view class="option-row-right">
					<view class="user-arrow">
						<image class="img-full" src="@/static/home/arrow-right.png"></image>
					</view>
				</view>
			</view>
			<view class="option-row" @click="openLogOff">
				<view class="option-row-key">
					注销账户
				</view>
				<view class="option-row-right">
					<view class="user-arrow">
						<image class="img-full" src="@/static/home/arrow-right.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 注销提示 -->
		<view class="mask-box" v-if="isLogOff">
			<view class="pupop-content">
				<view class="pupop-title">
					提醒
				</view>
				<view class="pupop-text">
					<view class="">
						您好，
					</view>
					<view class="">
						是否需要注销账号，一旦注销无法找回该账号!
					</view>
				</view>
				<view class="pupop-buts">
					<view class="pupop-but but1" @click="determine">
						确认
					</view>
					<view class="pupop-but but2" @click="isLogOff = false">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {cleanUserInfo} from '@/utils/utils.js'
	export default {
		data() {
			return {
				isLogOff: false
			};
		},
		methods: {
			openLogOff() {
				this.isLogOff = true
			},
			determine() {
				console.log('确定注销')
				
				this.$request({
					url: this.$api.cancelAccount,
					data: {},
					successCb: (res) => {
						console.log('请求成功', res)
						uni.hideLoading();
						cleanUserInfo()
						this.isLogOff = false
						uni.navigateBack()
						console.log(res);
					},
					failCb(e) {
						uni.hideLoading();
						console.log(e);
						uni.showToast({
							title: e.data.msg||'服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.page-wrap {
		border-top: 1rpx solid #F8F8F8;
	}
	page {
		background-color: #F8F8F8;
	}
	.set-up-option {
		margin: 34rpx 24rpx;
		padding-left: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.option-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #F5F5F5;
			padding: 24rpx 24rpx 24rpx 0;
			.option-row-key {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.option-row-logo {
				width: 112rpx ;
				height: 112rpx;
			}
			.user-arrow {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	
	.mask-box{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		.pupop-content{
			width: 654rpx;
			height: 622rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			opacity: 1;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			padding: 48rpx 32rpx 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			.pupop-title {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: rgba(0,0,0,0.8);
				line-height: 44rpx;
				text-align: center;
			}
			.pupop-text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: rgba(0,0,0,0.8);
				line-height: 44rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
			}
			.pupop-buts {
				display: flex;
				justify-content: space-between;
				.pupop-but {
					width: 282rpx;
					height: 88rpx;
					border-radius: 16rpx;
					opacity: 1;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					line-height: 88rpx;
					text-align: center;
				}
				.but1 {
					border: 2rpx solid #F4F5F7;
					color: rgba(0,0,0,0.8);
				}
				.but2 {
					background: #EE5953;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
